<template>
<l-layout v-if="ready" class="l-tab-page" >
    <l-panel  style="padding:0;" >
        <template #toolLeft >
            <div class="l-panel--item" >
                <l-select v-model="field" size="mini" :options="columns" valueKey="dbColumnName" labelKey="dbColumnName" ></l-select>
            </div>
            <div class="l-panel--item" >
                <l-select v-model="logic" size="mini" :options="options" ></l-select>
            </div>
            <div class="l-panel--item" >
                <el-input :placeholder="$t('请输入')"  @keyup.enter.native="hanleSearch" v-model="keyword" size="mini" >
                    <el-button @click="hanleSearch" slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </div>
        </template>
        <div class="l-rblock" >
            <l-table 
                :columns="columns2" 
                :dataSource="tableData" 
                :loading="tableLoading"
                :isPage="true"
                :pageTotal="tableTotal"
                :tablePage.sync="tableCurrentPage"
                @loadPageData="turnTablePage" 
                >
            </l-table>
        </div>
    </l-panel>
</l-layout>
</template>

<script>
const api = window.$api.data.dbTable
export default {
    props: {
        tableName:String,
        dbcode:String
    },
    data () {
        return {
            options:[
            {label:'等于',value:"Equal"},
            {label:'不等于',value:"NotEqual"},
            {label:'大于',value:"Greater"},
            {label:'大于等于',value:"GreaterThan"},
            {label:'小于',value:"Less"},
            {label:'小于等于',value:"LessThan"},
            {label:'为空',value:"Null"},
            {label:'不为空',value:"NotNull"},
            {label:'包含',value:"Like"}],

            field:'',
            logic:'',
            keyword:'',
            
            tableLoading:false,
            tableData:[],
            tableTotal:0,
            tablePageSize:50,
            tableCurrentPage:1,

            columns:[],

            ready:false
        };
    },
    created () {
    },
    mounted () {
    },
    computed:{
        columns2(){
            const res = []
            this.columns.forEach(column=>{
                res.push({label:column.dbColumnName,prop:column.dbColumnName.toLowerCase(),minWidth:'160'})
            })
            return res
        }
    },
    methods:{
        async init(){
            this.ready = false
            this.tableLoading = true
            await this.fetchColums()
            await this.loadTableData()   
            this.ready = true       
        },
        async fetchColums(){
            this.columns = await this.$awaitWraper(api.getColumns(this.dbcode,this.tableName))
        },
        async loadTableData(isNotFirst){
            if(!isNotFirst){
                this.tableCurrentPage = 1;
            }
            this.tableLoading = true
            let queryData = {
                rows:this.tablePageSize,
                page:this.tableCurrentPage,
                keyword:this.keyword,
                field:this.field,
                logic:this.logic,
                code:this.dbcode,
                tableName:this.tableName
            }
            const data = await this.$awaitWraper(api.getDataPage(queryData))
            this.tableData = data.rows
            this.tableTotal = data.records
            this.tableLoading = false
        },
        turnTablePage({rows}){
            this.tablePageSize = rows
            this.loadTableData(true)
        },
        hanleSearch(){
            this.loadTableData()
        },
        resetForm(){
            this.tableCurrentPage = 1
            this.columns = []
            this.tableData = []
            this.tableTotal = 0

        }
    }
}
</script>